<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="test.css">
</head>
<body>
    <!-- 
        grid布局，对元素声明display：grid即可把该元素变成网格盒子
        通过grid-template-rows和grid-template-columns设置行和列
        例如：
            1. 50px 40px 30px（依次写出长度，单位也可以是其他）
            2. repeat(5,20px)（重复5次20px）
            3. repeat(3,1fr)（重复3次1fr，1fr相当于1份，用于分配可支配空间）
            4. minmax(50px,100px)（设置一个最小50，最大100的长度）
        设置元素位置
            默认情况下会挨个格子排列，从左到右，从上到下
            通过设置四根边线可以框出一个矩形区域来确定元素的位置和大小
            例如：   grid-row-start: 3;
                     grid-row-end: 4;
                     grid-column-start: 3;
                     grid-column-end: 5;
            
            栅格线的命名
            用[名称]来命名栅格线，一般前后都要命名
            例如：
                grid-template-columns:[c1-start] 10px [c1-end c2-start] 10px [c2-end]
            重复用法
                grid-template-columns: repeat(3,[c-start] 10px [c-end])
                使用时在名字后加上序号
                     grid-column-start: c-start 1;
                     grid-column-end: c-end 1;

            复合属性
            grid-row
            grid-column
            gird-area（推荐）

            grid-area:行开始/列开始/行结束/列结束

            区域命名划分
            grid-template-areas: ". . a1 . . " ". . a1 . .";
            同一个引号内为一行
            .代表占位
            相同区域必须连在一起且要形成一个矩形

            对齐方式：（和flex布局大体一致）
            1.整体对齐
                justify-content 水平
                align-content   垂直
            2.栅格内元素对齐
                justify-item    水平
                aligin-item     垂直
            3.每个栅格独立对齐
                justify-self
                align-self
                

     -->
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </section>
</body>
</html>